<template>
  <div class="remind">
    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="openeds">
          <el-submenu index="1">
            <template slot="title">未处理</template>
            <template v-for="(item, index) in noList">
              <el-tooltip :open-delay="1000" :content="item.title" :disabled="!item.title" placement="top" effect="light" :key="'noList' + index">
                <el-menu-item :index="`'${index} + noList'`" @click="openOid(item)" :class="{ 'is-active': item.checked }">
                  <img v-if="item.isOfficial" src="static/image/home/contact/thing_document.png" />
                  <img v-else src="static/image/home/contact/thing_date.png" />
                  <div>
                    {{
                      item.isOfficial
                        ? `${item.sendCompany}[${item.year}]${
                            item.sendDept ? item.sendDept : ""
                          }${item.issuedNumber}号`
                        : textMsg($utilJs.toRawStr(item.VALUE))
                    }}
                  </div>
                </el-menu-item>
              </el-tooltip>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">已完成</template>
            <template v-for="(item, index) in list">
              <el-tooltip :open-delay="1000" :content="item.title" :disabled="!item.title" placement="top" effect="light" :key="'list' + index">
                <el-menu-item :index="`'${index} + list'`" :key="'remindList' + index" @click="openOid(item)" :class="{ 'is-active': item.checked }">
                  <img v-if="item.isOfficial" src="static/image/home/contact/thing_document.png" />
                  <img v-else src="static/image/home/contact/thing_date.png" />
                  <div>
                    {{
                      item.isOfficial
                        ? `${item.sendCompany}[${item.year}]${
                            item.sendDept ? item.sendDept : ""
                          }${item.issuedNumber}号`
                        : textMsg($utilJs.toRawStr(item.VALUE))
                    }}
                  </div>
                </el-menu-item>
              </el-tooltip>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <IndexMsg v-if="flag == 1 && isUpdate" :formMsg="formMsg" ref="indexMsg" :downLoadFileList="downLoadFileList" @dbNewChat="dbNewChat" @getOfficial="getOfficial" @closeRemindView="closeRemindView"
          @isUpdateRemindList="isUpdateRemindList" @downloadListAddProcess="downloadListAddProcess" @setOfficialFileSQL="setOfficialFileSQL" @updateOver="updateOver"></IndexMsg>
        <Detail v-if="flag == 2" :formMsg="formMsg" @updateIsDone="updateIsDone" @delRemind="delRemind" @addRemind="addRemind"></Detail>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import IndexMsg from "../../components/template/official_remind"; // 公文
import Detail from "../../components/template/official_chat"; // 即时通讯待办详情
import { mapMutations, mapState } from "vuex";
export default {
  props: {
    textMsg: {
      //zk新增，父组件传过来的方法
      type: Function,
      default: null,
    },
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    notDataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    remindList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    offItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    downLoadFileList: {
      type: Array,
      default: () => {
        return {};
      },
    },
  },
  components: {
    IndexMsg,
    Detail,
  },
  data() {
    return {
      openeds: ["1", "2"],
      formMsg: null,
      flag: null,
      noList: [],
      list: [],
      isUpdate: true,
      isOffItem: false,
      // officialTime:0,//倒计时
    };
  },
  computed: {
    ...mapState(["timeoutObj"]),
  },
  methods: {
    ...mapMutations(["setTimeoutObj"]),
    storeTimeoutObj() {
      this.$refs.indexMsg && this.$refs.indexMsg.storeTimeoutObj(); //zk0510修改,元素存在才调方法
    },
    // 点击左侧列表
    openOid(item) {
      //zk0429新增,切换时停止计时并保存
      window.lookOfficialTimeout && clearTimeout(window.lookOfficialTimeout);
      window.lookOfficialInterval && clearInterval(window.lookOfficialInterval);
      if (this.$refs.indexMsg) {
        console.log(this.$refs.indexMsg.officialTime);
        if (this.$refs.indexMsg.officialTime >= 0 && this.formMsg != null) {
          console.log("进了倒计时设置");
          this.setTimeoutObj({
            id: this.formMsg.oId,
            time: this.$refs.indexMsg.officialTime,
          });
          console.log(this.timeoutObj);
        }
      }
      // 强制刷新组件
      this.isUpdate = false;
      this.$nextTick(() => {
        this.formMsg = this.flag = null;
        this.isUpdate = true;
        if (!this.isOffItem) this.initChecked();
        this.formMsg = item;
        if (item.isOfficial) this.flag = 1;
        else this.flag = 2;
        this.isOffItem = false;
        console.log(this.formMsg, "点击的item");
      });
    },
    // 更新完成状态
    updateIsDone() {
      this.$emit("updateIsDone", this.formMsg);
      // 更新视图
      if (this.formMsg.ISDONE == 0) this.initView(0);
      else if (this.formMsg.ISDONE == 1) this.initView(1);
    },
    // 删除待办
    delRemind() {
      this.$emit("delRemind", this.formMsg);
      this.initView();
    },
    // 添加待办
    addRemind() {
      this.$emit("addRemind", {
        state: 1,
        item: this.formMsg,
      });
    },
    // 跳转至聊天页面
    dbNewChat(info) {
      this.$emit("dbNewChat", info);
    },
    // 初始化数组
    initList() {
      this.noList = [
        ...this.notDataList,
        ...this.remindList.filter((item) => item.ISDONE == 0),
      ];
      this.list = [
        ...this.dataList,
        ...this.remindList.filter((item) => item.ISDONE != 0),
      ];
      console.log(this.noList, this.list, "修改后的list");
      this.initChecked();
    },
    // 更新视图
    initView(flag) {
      // if (this.noList.length > 0) {
      //   for (let i in this.noList) {
      //     if (this.formMsg.MESSAGE_ID == this.noList[i].MESSAGE_ID) {
      //       if (flag == 0) this.list.push(this.noList[i]);
      //       this.noList.splice(i, 1);
      //       break;
      //     }
      //   }
      // }
      // if (this.list.length > 0) {
      //   for (let i in this.list) {
      //     if (this.formMsg.MESSAGE_ID == this.list[i].MESSAGE_ID) {
      //       if (flag == 1) this.noList.push(this.list[i]);
      //       this.list.splice(i, 1);
      //       break;
      //     }
      //   }
      // }
    },
    // 初始化选中状态
    initChecked() {
      this.noList.map((item) => {
        this.$set(item, "checked", false);
      });
      this.list.map((item) => {
        this.$set(item, "checked", false);
      });
    },
    // 获取公文审核列表
    getOfficial() {
      this.$ajax_official(
        "get",
        "office/document/document/myList",
        {},
        (res) => {
          console.log(res, "查询返回");
          if (res.code == 200) {
            this.dataList = res.data.dataList;
            this.notDataList = res.data.notDataList;
            console.log(this.dataList, this.notDataList, "查询返回");
            this.dataList.map((item) => {
              item["isOfficial"] = true;
              item["isRemind"] = false;
              item["isManage"] = true;
              item["CREATEDATE"] = item.createTime;
              item["VALUE"] = item.title;
              // 处理展示的公文图片
              if (item.docImgPath) item.docImgPath = item.docImgPath.split(",");
            });
            this.notDataList.map((item) => {
              item["isOfficial"] = true;
              item["isRemind"] = false;
              item["isManage"] = false;
              item["CREATEDATE"] = item.createTime;
              item["VALUE"] = item.title;
              // 处理展示的公文图片
              if (item.docImgPath) item.docImgPath = item.docImgPath.split(",");
            });
            this.initList();
            this.flag = null;
            // 自动选中列表的第一项
            this.initChoiceItem();
            // zk0429新增,选中点击的那一条,0510修改,暂停用
            // this.isUpdate = true;
            // this.flag=1
            // if(this.formMsg != null){
            //   console.log("进了设置高亮")
            //   for(let i in this.list){
            //     if(this.list[i].oId == this.formMsg.oId){
            //       this.openOid(this.list[i]);
            //       this.$set(this.list[i], "checked", true);
            //       this.isOffItem = true;
            //       break;
            //     }
            //   }
            // }
            this.$forceUpdate();
          } else {
            this.$Message.warning(res.msg);
          }
        },
        (res) => {
          this.$Message.warning(res.msg);
        }
      );
    },
    // 提交反馈后触发
    closeRemindView() {
      this.$emit("closeRemindView");
    },
    // 刷新待办列表
    isUpdateRemindList() {
      this.$emit("isUpdateRemindList");
    },
    // 自动选中列表的第一项
    initChoiceItem() {
      if (this.noList.length > 0) {
        this.openOid(this.noList[0]);
        this.$set(this.noList[0], "checked", true);
      } else if (this.list.length > 0) {
        this.openOid(this.list[0]);
        this.$set(this.list[0], "checked", true);
      } else if (this.noList.length == 0 && this.list.length == 0) {
        this.$emit("closeRemindView");
      }
      this.isOffItem = true;
    },
    // 公文附件下载
    downloadListAddProcess(item) {
      this.$emit("downloadListAddProcess", item);
    },
    // 公文附件存储本地数据库
    setOfficialFileSQL(arr) {
      this.$emit("setOfficialFileSQL", arr);
    },
    // 及时更新完成状态
    updateOver(info) {
      for (let i in this.noList) {
        if (info.oId == this.noList[i].oId) {
          this.noList[i].viewerTime = new Date(); //zk0510新增,更新时修改viewertiem,防止在完成列表点击时会有倒计时
          this.list.unshift(this.noList[i]);
          this.noList.splice(i, 1);
        }
      }
      console.log(info, "及时更新完成状态H", this.list, this.noList);
    },
  },
  created() {
    this.initList();
    // 默认打开点击的item
    if (this.offItem != {}) {
      this.openOid(this.offItem);
      this.isOffItem = true;
    }
    // 当前点击的是公文
    if (this.offItem.isOfficial) {
      // 已完成
      if (this.offItem.isManage) {
        for (let item of this.dataList) {
          if (item.oId == this.offItem.oId) {
            this.$set(item, "checked", true);
          }
        }
      } else {
        // 未完成
        for (let item of this.notDataList) {
          if (item.oId == this.offItem.oId) {
            this.$set(item, "checked", true);
          }
        }
      }
    } else {
      // 当前点击的是待办
      for (let item of this.remindList) {
        if (item.MESSAGE_ID == this.offItem.MESSAGE_ID) {
          this.$set(item, "checked", true);
        }
      }
    }
  },
};
</script>
<style lang="less" scoped>
.remind {
  width: 100%;
  height: 100%;
  padding: 0;
  /deep/.el-container {
    height: 100%;
  }
  /deep/.el-submenu__title {
    font-weight: bold;
  }
  /deep/.el-menu {
    background-color: #f5f5f5 !important;
  }
  /deep/.el-menu-item {
    padding-left: 25px !important;
    border-left: 3px solid transparent;
    padding: 0 20px !important;
  }
  /deep/.el-menu-item:hover {
    background-color: #e5e5e5 !important;
    border-left: 3px solid #fa7500;
  }
  /deep/.el-aside {
    width: 250px !important;
    .el-menu {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-bottom: 10px;
    }
    .el-menu-item {
      display: flex;
      align-items: center;
      img {
        margin-right: 16px;
      }
      div {
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  /deep/.el-submenu__title,
  .el-submenu__title:hover {
    background-color: #ffffff;
  }
}
</style>
